<!--
 * @Description: 
 * @Autor: Bingo
 * @Date: 2024-05-24 16:45:35
 * @LastEditors: Bingo
 * @LastEditTime: 2024-09-09 14:19:16
-->
<template>
  <div class="page-container">
    <div class="login-form">
      <div class="login-title">
        <span style="font-size: 30px">({{ version_const }})</span>
      </div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            clearable
            v-model="username"
            autocomplete="off"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            clearable
            v-model="password"
            :type="isfieldPassword"
            name="password"
            label="密码"
            autocomplete="off"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <template #button>
              <div class="b-btn">
                <van-icon
                  name="closed-eye"
                  v-if="isfieldPassword == 'text'"
                  @click="handlefieldPassword('password')"
                />
                <van-icon name="eye-o" v-else @click="handlefieldPassword('text')" />
              </div>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px 0">
          <van-button round block type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import logoImg from "@/assets/bg.jpg";
import { useRouter } from "vue-router";
import { FieldType, SubmitBarProps } from "vant";
import { useLogin } from "@/store/login";
import { version_const } from "@/config/const";
const store = useLogin();
const Router = useRouter();
const username = ref("");
const password = ref("");
let isfieldPassword = ref<FieldType>("password");
const onSubmit = (values: SubmitBarProps) => {
  store.login(
    {
      username: username.value,
      password: password.value,
    },
    () => {
      Router.push("/");
    }
  );
};
const handlefieldPassword = (type: FieldType) => {
  isfieldPassword.value = type;
};
</script>
<style scoped lang="less">
.page-container {
  background: url("../../assets/bg.jpg") no-repeat;
  background-size: cover;
  padding-left: 10px;
  padding-right: 10px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  .login-form {
    position: absolute;
    width: 96%;
    top: 40%;
    transform: translateY(-50%);
  }
  .login-title {
    text-align: center;
    font-size: 50px;
    padding-bottom: 50px;
    font-weight: bold;
    color: white;
  }
}
</style>
